<template>
  <div>
    <!-- 
    注意事项：
      计算属性：在不改变原始数据的情况下对数据进行操作（计算 排序）重新渲染
      1.在computed中定义的函数一定要加return 并且不能和data和methods里的变量和方法重名
      2.渲染问题，计算属性中的函数以变量的形式输出 不需要加()
      3.属于同步操作 可以用来监听依赖数据的变化
    -->
    <p>洋柿子今日{{ a }}一个，你要{{ b }}个 一共{{ sum }}钱</p>
    <button @click="add">涨价5yuan</button>
    <button @click="addnum">多买5ge</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 5,
      b: 10
    }
  },
  methods: {
    add() {
      this.a += 5
    },
    addnum() {
      this.b += 5
    }
  },
  computed: {
    // 当 a b发生变化时，sum也会同步改变
    sum() {
      return this.a * this.b
    }
  }
}
</script>